<template>
  <div class="app">
    <div class="pos">
      <h2>
        {{ getshome.name }}
      </h2>
      <div class="start">
        <van-rate
          v-model="value"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </div>
      <div>
        <van-divider
          :style="{
            color: '#fff',
            borderColor: '#ccc',
            padding: '0 16px',
          }"
        >
          <span style="font-size:26px">优惠信息</span>
        </van-divider>
      </div>
      <ul v-for="(item, i) in getshome.supports" :key="i">
        <li><img :src="imgurl[i]" alt=""></li>
        <li>{{ item }}</li>
      </ul>
      <div  class="fontc">
        <van-divider
          :style="{
            size:30,
            color: '#fff',
            borderColor: '#ccc',
            padding: '0 16px',
          }"
        >
          <span  style="font-size:26px">商家公告</span>
        </van-divider>
      </div>

      <p>{{ getshome.bulletin }}</p>
      <div @click="fn" class="del">x</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["getshome"],
  data() {
    return {
      value: "3",
      imgurl: [
        require("@/assets/img/decrease.png"),
        require("@/assets/img/discount.png"),
        require("@/assets/img/discount.png"),
        require("@/assets/img/special.png"),
        require("@/assets/img/special.png"),
      ],
    };
  },

  created() {
    console.log(this.getshome);
  },
  methods: {
    fn() {
      this.$emit("hello");
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  color: #ffffff;
  padding: 80px 30px 0px 30px;
  box-sizing: border-box;
  background: rgba(57, 66, 73, 0.9);
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 10;
}
.pos {
  height: 100%;
  width: 100%;
  position: relative;
}
.del {
  font-size: 30px;
  color: #90969a;
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}
h3 {
  text-align: center;
  font-size: 20px;
  margin: 20px 0px;
}
h2 {
  text-align: center;
  font-size: 30px;
}
.start {
  text-align: center;
  margin: 20px 0px 30px 0px;
}
ul li {
  margin: 10px 0px;
  letter-spacing: 4px;
}
p {
  letter-spacing: 4px;
  line-height: 18px;
}
ul{
  display: flex;
  img{
    height: 20px;
    width: 20px;
    margin-right: 4px;
  }
}
</style>